<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-11-17 10:16:52
 * @LastEditors: huangtianyang
 * @LastEditTime: 2024-05-14 11:05:43
 * @FilePath: \driving-training-admin\src\components\form\address.vue
-->
<template>
    <div class="address-container">
        <template v-if="!disabled">
            <div :style="{ flex: hasDetailed ? 0.2 : 1, 'margin-right': ' 16px', display: 'flex' }">
                <!-- <el-cascader
                    style="width: 100%"
                    :options="provinceAndCityData"
                    v-model="selectedOptions"
                    clearable
                    :disabled="disabled"
                    @change="
                        (res: any) => {
                            $emit('update:modelValue', res)
                            $emit('change', res)
                        }
                    "
                >
                </el-cascader> -->
                <el-select
                    v-model="privince.id"
                    style="width: 48%"
                    :disabled="disabled"
                    clearable
                    @change="getCityData"
                >
                    <el-option
                        v-for="itemOption in privinceOptions"
                        :key="itemOption.id"
                        :label="itemOption.label"
                        :value="itemOption.id"
                    />
                </el-select>
                <el-select
                    v-model="city.id"
                    style="width: 48%; margin-left: 4%"
                    :disabled="disabled"
                    clearable
                    @change="
                        (res: any) => {
                            console.log(res, privince)
                            cityOptions.forEach(item => {
                                if (item.id === res) {
                                    city.label = item.label
                                }
                            })
                            $emit('change', [privince, city])
                            //如果是直辖市，则不显示城市，显示直辖市的名称
                            if ([820000, 810000, 110000, 120000, 310000, 500000].includes(Number(privince.id))) {
                                //$emit('change', [privince, privince])
                            }
                        }
                    "
                >
                    <el-option
                        v-for="itemOption in cityOptions"
                        :key="itemOption.id"
                        :label="itemOption.label"
                        :value="itemOption.id"
                    />
                </el-select>
            </div>
            <div style="flex: 0.4" v-if="hasDetailed">
                <el-input
                    v-model="detailedAddr"
                    style="width: 100%"
                    placeholder="请输入详细地址"
                    clearable
                    ref="inputRef"
                    :disabled="disabled"
                    @click="onFocus"
                    @blur="
                        (res: any) => {
                            $emit('update:detailed', res.target.value)
                        }
                    "
                ></el-input>
            </div>
        </template>
        <template v-else>
            <el-tooltip
                style="width: 100%"
                effect="dark"
                :content="selectedOptions[0] + selectedOptions[1]"
                placement="top"
            >
                <p style="line-height: 34px">
                    {{ selectedOptions[0] + selectedOptions[1] }}
                </p>
            </el-tooltip>
        </template>
        <drawer :data="drawerData" @close="onDrawerClose" @change="onDrawerChange"></drawer>
    </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, watch, watchEffect } from 'vue'
import drawer from './drawer.vue'
import { districtChildren } from '@/apis/system'

const props = defineProps(['value', 'detailed', 'hasDetailed', 'region', 'disabled', 'latLng'])
const emits = defineEmits(['update:detailed', 'change', 'latLng'])
//选择的地址
const selectedOptions = ref<string[]>([])
//详细的地址
const detailedAddr = ref('')

const inputRef = ref()

const privince = reactive<{ label: string; id: string }>({ label: '', id: '' })
const privinceOptions = reactive<{ label: string; id: string }[]>([])

const city = reactive<{ label: string; id: string }>({ label: '', id: '' })
const cityOptions = reactive<{ label: string; id: string }[]>([])

const drawerData = reactive({
    visible: false,
    address: detailedAddr.value,
    lat: props.latLng.length ? props.latLng[0] : '',
    lng: props.latLng.length ? props.latLng[1] : ''
})

watch([props], (newVal, oldVal) => {
    console.log('watchEffect地区', newVal)
    if (props.value.length) {
        privince.id = props.value[0].id
        privince.label = props.value[0].label

        console.log('city', city)

        city.id = props.value[1].id
        city.label = props.value[1].label
        districtChildren(privince.id).then((res: any) => {
            if (Number(res.data.code) === 200) {
                cityOptions.length = 0
                res.data.result.forEach((item: any) => {
                    cityOptions.push({
                        label: item.fullname,
                        id: item.id
                    })
                })
            }
        })
    }
})

onMounted(() => {
    districtChildren().then((res: any) => {
        if (Number(res.data.code) === 200) {
            privinceOptions.length = 0
            cityOptions.length = 0
            res.data.result.forEach((item: any) => {
                privinceOptions.push({
                    label: item.fullname,
                    id: item.id
                })
            })
        }
    })
})

const getCityData = (res: any) => {
    console.log('privince', res)
    privinceOptions.forEach(item => {
        if (item.id === res) {
            privince.label = item.label
        }
    })
    districtChildren(res).then((res: any) => {
        if (Number(res.data.code) === 200) {
            cityOptions.length = 0
            city.label = ''
            city.id = ''
            res.data.result.forEach((item: any) => {
                cityOptions.push({
                    label: item.fullname,
                    id: item.id
                })
            })
        }
    })
}

//监听输入框激活
const onFocus = () => {
    drawerData.visible = true
}
const onDrawerClose = () => {
    drawerData.visible = false
    inputRef.value.blur()
}
const onDrawerChange = (res: any) => {
    detailedAddr.value = res.address
    selectedOptions.value = [res.province, res.city]
    emits('latLng', { ...res })
}
</script>

<style scoped>
.address-container {
    width: 100%;
    display: flex;
}
</style>
